<template>


	<view class="body-view body-viewxin">
		<!-- 使用scroll-view实现tabs滑动切换 -->
		<!-- <scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
			<view class="ann" style="display: flex;">
				<view class="menu-topic-view" v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index"
					@click="swichMenu(index)">
					<view :class="currentIndex==index ? 'menu-topic-act' : 'menu-topic'">
						<view style="padding: 0 20rpx;"  class="menu-topic-text">{{item.name}}</view>
					</view>
				</view>
			</view>
		</scroll-view> -->
		<!-- 内容 -->
		<swiper class="swiper-box-list" :autoplay="false" @change="changeSwiper" :current="currentIndex"
			:style="{ height: swiperHeightss + 'px','margin-top':0}">
			<swiper-item class="swiper-topic-list">
				<view class="swiper-item" :id="'content-wrap1' + 0">
					<view class="jmtj1 jmtjjj">


						<view class="qysj njuli">
							<view class="ntit">
								<view class="ntit-box">
									<image src="../static/images/tz.png" mode="widthFix"></image>
									<text>加盟条件</text>
								</view>
							</view>
							<!-- <u-parse :content="content1[0].articleData.content"></u-parse> -->
							<view class="jmtj-box">
								<view class="jmtj-li" v-for="(item,index) in content1" :key="index">
									<image v-if="item.image" :src="item.image" mode="widthFix"></image>
									<image v-else src="../static/images/gou.png" mode="widthFix"></image>
									
									<view class="jmtj-wenzi">
										{{item.title}}
									</view>
								</view>
							</view>

						</view>
					</view>


					<view class="jmtj2 jmtjjj">

						<view class="qysj njuli">
							<view class="ntit">
								<view class="ntit-box">
									<image src="../static/images/tz.png" mode="widthFix"></image>
									<text>{{content12.title}}</text>
								</view>
							</view>

							
							<view class="jmtj-box2">
								<u-parse v-if="content12.articleData" :content="content12.articleData.content"></u-parse>
								<!-- 合同期限8年<br>
								加盟商负责门店所有投资，并亲自参与门店经营 -->
							</view>

						</view>
					</view>


					<view class="jmtj3 jmtjjj">
						<view class="qysj njuli">
							<view class="ntit">
								<view class="ntit-box">
									<image src="../static/images/tz.png" mode="widthFix"></image>
									<text>{{content13.title}}</text>
								</view>
							</view>

							<view class="jmtj-box3">
							<u-parse v-if="content13.articleData" :content="content13.articleData.content" :tag-style="tagStyle"></u-parse>
<!-- 								<view class="bg">
									<view class="studentInfo">
										<u-parse :content="content" :tag-style="tagStyle"></u-parse>
									</view>
								</view>

								<view class="shuju-tishi">
									*总投资费用不含店铺转让费和租赁押金
								</view> -->


							</view>

						</view>
					</view>
					
					<view class="jmtj2 jmtjjj">
					
						<view class="qysj njuli">
							<view class="ntit">
								<view class="ntit-box">
									<image src="../static/images/tz.png" mode="widthFix"></image>
									<text>{{content15.title}}</text>
								</view>
							</view>
					
							
							<view class="jmtj-box2" style="text-align: left;">
								<u-parse v-if="content15.articleData" :content="content15.articleData.content"></u-parse>
								<!-- 合同期限8年<br>
								加盟商负责门店所有投资，并亲自参与门店经营 -->
							</view>
					
						</view>
					</view>
					<view class="jmtj4 jmtjjj">
						<view class="qysj njuli">
							<view class="ntit">
								<view class="ntit-box">
									<image src="../static/images/tz.png" mode="widthFix"></image>
									<text>{{content14.title}}</text>
								</view>
							</view>

							<view class="jmtj-box3">
								
								<u-parse v-if="content14.articleData" :content="content14.articleData.content" :tag-style="tagStyle"></u-parse>
								<!-- <view class="kkl">
									<text>
										百果园公司将门店根据开店城市的店铺租金、员工薪酬水平及消费能力将百果园门店划分为甲类门店、乙类门店，并按照门店月销售毛利额阶梯累进式收取特许经营资源使用费。
									</text>
									<text>
										收费规则如下：</text>
								</view>

								<view class="bg">
									<view class="kkl">
										甲类门店
									</view>
									<view class="studentInfo">
										<u-parse :content="content2" :tag-style="tagStyle"></u-parse>
									</view>
								</view>

								<view class="bg">
									<view class="kkl">
										乙类门店
									</view>
									<view class="studentInfo">
										<u-parse :content="content3" :tag-style="tagStyle"></u-parse>
									</view>
								</view> -->


							</view>




						</view>
					</view>

				</view>

			</swiper-item>
			

		</swiper>
	</view>
</template>

<script>
 	import {
 		apiBaseUrl
 	} from '@/config/config.js'
	export default {
		data() {
			return {
				apiBaseUrl,
				scrollLeft: 0,
				tabs: [{
					name: '加盟A模式'
				},
				{
					name: '加盟B模式'
				}, 
				],
				content1: [],
				content2: [],
				content12:{},
				content13:{},
				content14:{},
				content15:{},
				content22:{},
				content23:{},
				content24:{},
				swiperHeightss: 0,
				currentIndex: 0,
				tabCurrent: 'tabNum1',



				jmtjli: [{
						tit: '认可百果园公司企业文化， 服从经营管理'
					},
					{
						tit: '加盟商要自己做店长经营门店/多店加盟需要履约辅助人'
					}, {
						tit: '具有创业者奋斗精神与投资风险承担意识'
					},
					{
						tit: '认可百果园公司企业文化， 服从经营管理提交征信报告，无不良信用记录'
					},
				],

				content: `
								<table width="100%" cellspacing="0" cellpadding="8">
									<tr>
										<td align="left" >总投资费用</td>
										<td align="left" colspan="2"><img src="/static/images/gou.png">30.7万</td>
									</tr>
									<tr>
										<td align="left">固定投资</td>
										<td align="left"  colspan="2"><img src="/static/images/gou.png">加盟费3万(续约不再收取)<br><img src="/static/images/gou.png">第三方选址评估服务费1.5万<br><img src="/static/images/gou.png">电子价签费1万<br><img src="/static/images/gou.png">招牌设备费(工程)(预估)6.2万<br><img src="/static/images/gou.png">信息设备费(预估)3万<br><img src="/static/images/gou.png">门店装修费(预估)10万</td>
									</tr>
									<tr>
						 	 			<td align="left">流动资金</td>
										<td align="left"  colspan="2"><img src="/static/images/gou.png">履约保证金1万<br><img src="/static/images/gou.png">经营保证金2<br><img src="/static/images/gou.png">商品预付款3万</td>
									</tr>
								</table>`,
				content01: `
												<table width="100%" cellspacing="0" cellpadding="8">
													<tr>
														<td align="left" >总投资费用</td>
														<td align="left" colspan="2"><img src="/static/images/gou.png">11.5万</td>
													</tr>
													<tr>
														<td align="left">固定投资</td>
														<td align="left"  colspan="2"><img src="/static/images/gou.png">加盟费3万(续约不再收取)<br><img src="/static/images/gou.png">第三方选址评估服务费1.5万<br><img src="/static/images/gou.png">电子价签费1万<br><img src="/static/images/xx.png">招牌设备费(工程)(预估)6.2万<br><img src="/static/images/xx.png">信息设备费(预估)3万<br><img src="/static/images/xx.png">门店装修费(预估)10万</td>
													</tr>
													<tr>
										 	 			<td align="left">流动资金</td>
														<td align="left"  colspan="2"><img src="/static/images/gou.png">履约保证金1万<br><img src="/static/images/gou.png">经营保证金2<br><img src="/static/images/gou.png">商品预付款3万</td>
													</tr>
												</table>`,
				content2: `<table width="100%" cellspacing="0" cellpadding="10">
   
    <tr>
      <td style="color: #4e3021;" rowspan="2">月销售总毛利额</td>
      <td style="color: #00943a;" colspan="2">收取比例</td>
      
    </tr>
	<tr>
	  <td style="color: #00943a;">线上毛利额</td>
	  <td style="color: #00943a;">线下毛利额</td>
	</tr>
    <tr>
      <td style="color: #4e3021;">6.2万及以内</td>
      <td style="color: #00943a;" colspan="2">3%</td>
   
    </tr>
    <tr>
      <td style="color: #4e3021;">6.2万以上</td>
      <td style="color: #00943a;" >9%</td>
      <td style="color: #00943a;" >15%</td>
    </tr>
  </table>`,
				content3: `<table width="100%" cellspacing="0" cellpadding="10">
   
    <tr>
      <td style="color: #4e3021;" rowspan="2">月销售总毛利额</td>
      <td style="color: #00943a;" colspan="2">收取比例</td>
      
    </tr>
  	<tr>
  	  <td style="color: #00943a;">线上毛利额</td>
  	  <td style="color: #00943a;">线下毛利额</td>
  	</tr>
    <tr>
      <td style="color: #4e3021;">5.6万及以内</td>
      <td style="color: #00943a;" colspan="2">3%</td>
   
    </tr>
    <tr>
      <td style="color: #4e3021;">5.6万以上</td>
      <td style="color: #00943a;" >9%</td>
      <td style="color: #00943a;" >15%</td>
    </tr>
  </table>`,
				content02: `<table width="100%" cellspacing="0" cellpadding="10">
   
    <tr>
      <td style="color: #4e3021;" rowspan="2">月销售总毛利额</td>
      <td style="color: #00943a;" colspan="2">收取比例</td>
      
    </tr>
	<tr>
	  <td style="color: #00943a;">线上毛利额</td>
	  <td style="color: #00943a;">线下毛利额</td>
	</tr>
    <tr>
      <td style="color: #4e3021;">6.2万及以内</td>
      <td style="color: #00943a;" colspan="2">8%</td>
   
    </tr>
    <tr>
      <td style="color: #4e3021;">6.2万以上</td>
      <td style="color: #00943a;" >14%</td>
      <td style="color: #00943a;" >20%</td>
    </tr>
  </table>`,
				content03: ``,
				tagStyle: {
					table: 'box-sizing: border-box; border-top: 1px solid #dfe2e5; border-left: 1px solid #dfe2e5;',
					th: 'border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;',
					td: 'border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;line-height: 2;',
					li: 'margin: 5px 0;',
					img: 'width:10px;height:auto;margin-right:5px'
				}


			}
		},
		onLoad(args) {
			//动态设置swiper的高度
		},

		created() {

			this.$api.article_list_data({
				siteCode: 'main',
				categoryCode: 1003006001001
			}, res => {
				if (res.code == 200) {
					this.content1 = res.data.list
					setTimeout(() => {

						this.$nextTick(() => {
							this.setSwiperHeightss();
						});
					}, 100)
				}
			})
			this.$api.article_list_data({
				siteCode: 'main',
				categoryCode: 1003006001002
			}, res => {
				if (res.code == 200) {
					this.content12 = res.data.list[0]
					setTimeout(() => {

						this.$nextTick(() => {
							this.setSwiperHeightss();
						});
					}, 100)
				}
			})
			this.$api.article_list_data({
				siteCode: 'main',
				categoryCode: 1003006001003
			}, res => {
				if (res.code == 200) {
					this.content13 = res.data.list[0]
					setTimeout(() => {

						this.$nextTick(() => {
							this.setSwiperHeightss();
						});
					}, 100)
				}
			})
			this.$api.article_list_data({
				siteCode: 'main',
				categoryCode: 1003006001004
			}, res => {
				if (res.code == 200) {
					this.content14 = res.data.list[0]
					setTimeout(() => {

						this.$nextTick(() => {
							this.setSwiperHeightss();
						});
					}, 100)
				}
			})
			this.$api.article_list_data({
				siteCode: 'main',
				categoryCode: 1003006001005
			}, res => {
				if (res.code == 200) {
					this.content15 = res.data.list[0]
					setTimeout(() => {

						this.$nextTick(() => {
							this.setSwiperHeightss();
						});
					}, 100)
				}
			})
			this.$api.article_list_data({
				siteCode: 'main',
				categoryCode: 1003006002001
			}, res => {
				if (res.code == 200) {
					this.content2 = res.data.list
					setTimeout(() => {

						this.$nextTick(() => {
							this.setSwiperHeightss();
						});
					}, 100)
				}
			})
			this.$api.article_list_data({
				siteCode: 'main',
				categoryCode: 1003006002002
			}, res => {
				if (res.code == 200) {
					this.content22 = res.data.list[0]
					setTimeout(() => {

						this.$nextTick(() => {
							this.setSwiperHeightss();
						});
					}, 100)
				}
			})
			this.$api.article_list_data({
				siteCode: 'main',
				categoryCode: 1003006002003
			}, res => {
				if (res.code == 200) {
					this.content23 = res.data.list[0]
					setTimeout(() => {

						this.$nextTick(() => {
							this.setSwiperHeightss();
						});
					}, 100)
				}
			})
			this.$api.article_list_data({
				siteCode: 'main',
				categoryCode: 1003006002004
			}, res => {
				if (res.code == 200) {
					this.content24 = res.data.list[0]
					setTimeout(() => {

						this.$nextTick(() => {
							this.setSwiperHeightss();
						});
					}, 100)
				}
			})
		},




		methods: {


			swichMenu(id) {
				this.currentIndex = id
				console.log(11, id)
				//this.tabCurrent = 'tabNum'+ id

				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				this.scrollLeft = 0;
				for (let i = 0; i < id; i++) {
					this.scrollLeft += 60
					console.log(this.scrollLeft, 60, id)
				};
			},
			changeSwiper(e) {
				console.log(22, e.detail.current)
				let index = e.detail.current
				this.swichMenu(index),



					this.currentIndex = e.detail.current;
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeightss();
				});
			},


			//动态设置swiper的高度
			setSwiperHeightss() {
				console.log(1234)
				let element = "#content-wrap1" + this.currentIndex;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeightss = res[0].height;
					}
				});
			},
		},

	}
</script>

